<template>
	<view class="orders-detail">
		<OrdersItem :data="data" :show-btn="false" />
		
		<view class="section_1">
			<view class="title">订单信息</view>
			
			<van-image
				src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61b30d246cd8030011e9dbb9/16391248298478006396.png"
				width="100%"
				height="1px"
			/>
			
			<view class="list">
				<view v-for="(item, index) in list1" :key="index" class="row flex-space-between">
					<view class="label">{{ item.label }}</view>
					<view class="value">{{ item.value }}</view>
				</view>
			</view>
		</view>
		
		<view class="section_1">
			<view class="title">订单信息</view>
			
			<van-image
				src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61b30d246cd8030011e9dbb9/16391248298478006396.png"
				width="100%"
				height="1px"
			/>
			
			<view class="list">
				<view v-for="(item, index) in list2" :key="index" class="row flex-space-between">
					<view class="label">{{ item.label }}</view>
					<view class="value">{{ item.value }}</view>
				</view>
			</view>
		</view>
		
		<view class="btn">
			<van-button round block color="linear-gradient(0deg, rgb(99, 93, 247) 0%, rgb(165, 173, 246) 100%)" @click="onClick">付款提醒</van-button>
		</view>
		
		<van-dialog
			:show="show"
			title="提示"
			@close="show = false"
			@confirm="onConfirm"
		/>
	</view>
</template>

<script>
import OrdersItem from '../components/orders-item.vue';
	
export default {
	components: {
		OrdersItem
	},
	data() {
		return {
			show: false,
			data: {
				id: 1,
				name: '马甲线健身培训课',
				img: '',
				count: 1,
				price: 20,
				status: 1,
			},
			list1: [
				{ label: '商品名称', value: '【上海】全民健身课' },
				{ label: '商品价格', value: '￥61' },
				{ label: '优惠券抵扣', value: '￥15' },
				{ label: '实际支付', value: '￥597' },
				{ label: '下单时间', value: '2020-03-17 15:26:32' },
				{ label: '剩余支付时间', value: '15:26:32' },
				{ label: '收款方', value: '衡阳奥星' }
			],
			list2: [
				{ label: '姓名', value: '江淮海' },
				{ label: '手机号', value: '15698711547' },
				{ label: '客户类型', value: '会员' },
			]
		}
	},
	methods: {
		onClick() {
			this.show = true;
		},
		onConfirm() {
			uni.navigateBack();
		}
	}
}
</script>

<style lang="scss" scoped>
.orders-detail {
	min-height: 100vh;
	background-color: rgb(243, 243, 243);
	padding: 30rpx;
	padding-bottom: 130rpx;
	
	.section_1 {
		background-color: rgb(255,255,255);
		box-shadow: 0px 0px 9rpx rgba(0,0,0,0.05);
		border-radius: 16rpx;
		margin-top: 20rpx;
		
		.title {
			padding: 30rpx 20rpx 0;
			font-size: 30rpx;
			font-weight: 500;
			line-height: 28rpx;
		}
		
		.list {
			padding: 20rpx 20rpx 1rpx;
			font-size: 26rpx;
			font-weight: 500;
			line-height: 25rpx;
		}
		
		.row {
			margin-bottom: 30rpx;
		}
		
		.value {
			color: rgb(136,136,136);
		}
	}
	
	.btn {
		position: fixed;
		bottom: 40rpx;
		left: 0;
		width: 100%;
		padding: 0 40rpx;
	}
}
</style>
